<template>
    <div>
         <Topbar>快速注册</Topbar>
        <div class="main">
            <div>
                <span class="fa fa-user-o txt"></span>
                <input type="text" placeholder="数字、字母、下划线6~12位" v-model="username">
            </div>
            <div>
                <span class="fa fa-edit txt"></span>
                <input type="password" placeholder="请输入密码" v-model="psw">
            </div>
            <div>
                <span class="fa fa-lock txt"></span>
                <input type="password"  placeholder="请确认密码" v-model="confirm">
            </div>
        </div>

        <div class="btn">
            <button @click="regist">注册</button>
        </div>
    </div>
</template>

<script>
import Topbar from '../components/Topbar.vue'
import axios from 'axios'
    export default{
        data:function(){
            return {
                username:"",
                psw:"",
                confirm:"",
                aa:""
            }
        },
        components:{
            Topbar
        },
        methods:{
            regist:function(){
                this.http.post("/user/regist",{username:this.username,psw:this.psw,confirm:this.confirm})
                .then(res=>{
                    console.dir(res);
                    this.aa = res.data.msg;
                    this.$vux.alert.show({
                        title:this.aa,
                        onHide(){
                            if(res.data.err==0){
                                location.href="/#/login"
                            }
                        }
                    })
                })
            }
        }
    }
</script>

<style scoped>
.main div{
    width: 100%;
    text-align: center;
    border-bottom:  1px solid #999999;
}
.main div input{
    width: 90%;
    border:none;
    margin-top: 8px;
    height: 30px;
}
.btn{
    width: 80%;
    margin: 10px auto;
    /*border: 1px solid black;*/
}
.btn button{
    width: 100%;
    height: 30px;
    background-color: #FF7500;
    border-radius: 4px;
    border: none;
    color: white;
}
.txt{
    color: #999999;
}
</style>